<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Batch</title>
  <link rel="icon" href="data:,">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <style>
    html, body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  </style>
</head>
<body style="text-align: center">
<header>
  <span>Job</span>
  <select id="jobName"></select>
  <button onclick="queryJobName()">queryJobName</button>
  <input id="parameters" placeholder="parameters" value="name=zhangsan,age=19"/>
  <button onclick="start()">start</button>
  <button onclick="startNextInstance()">startNextInstance</button>
</header>
<main>
  <button onclick="queryJob()">queryJob</button>
  <table id="table" align="center" border="1">
    <thead>
    <tr>
      <td>jId</td>
      <td>iId</td>
      <td>eId</td>
      <td>name</td>
      <td>startTime</td>
      <td>endTime</td>
      <td>status</td>
      <td>exitStatus</td>
      <td>jobParameters</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</main>
<footer>&copy; Batch 任务管理</footer>
</body>
<script>
  async function queryJobName() {
    const response = await fetch('batch/jobName');
    const data = await response.json();
    const selectElement = document.getElementById('jobName');
    selectElement.innerHTML = '';
    data.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option;
      optionElement.textContent = option;
      selectElement.appendChild(optionElement);
    });
  }

  async function queryJob() {
    const response = await fetch('batch/queryjob?pageNum=1&pageSize=10');
    const data = await response.json();
    const tbodyElement = document.querySelector('#table tbody');
    tbodyElement.innerHTML = '';
    data.forEach(d => {
      const row = document.createElement('tr');
      ['jid', 'iid', 'eid', 'name', 'startTime', 'endTime', 'status', 'exitStatus', 'param'].forEach(i => {
        const cell = document.createElement('td');
        cell.textContent = d[i];
        row.appendChild(cell);
      });
      const cell = document.createElement('td');
      [['stop', stop], ['abandon', abandon], ['restart', restart]].forEach(i => {
        const button = document.createElement('button');
        button.innerHTML = i[0];
        button.onclick = i[1];
        cell.appendChild(button)
      });
      row.appendChild(cell);
      tbodyElement.appendChild(row);
    });
  }

  function start() {
    fetch(`batch/start?jobName=${document.getElementById('jobName').value}&parameters=${document.getElementById('parameters').value}`).then(response => queryJob());
  }

  function startNextInstance() {
    fetch(`batch/startNextInstance?jobName=${document.getElementById('jobName').value}`).then(response => queryJob());
  }

  function stop() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent); // 当前行数据
    fetch('batch/stop?executionId=' + data[2]).then(response => queryJob());
  }

  function abandon() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch('batch/abandon?jobExecutionId=' + data[2]).then(response => queryJob());
  }

  function restart() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch('batch/restart?executionId=' + data[2]).then(response => queryJob());
  }

  window.onload = () => {
    queryJob();
    queryJobName();
  }
</script>
</html>